<template>
  <div class="tab">
    <div class="tab1">
      <div class="tab1-left">
        <h2>
          <span></span>
          残保金优化
        </h2>
        <div class="left_txt">
          <div class="txt1">
            <p>
              助力企业合规降本增效<br />
              一站式安置残疾人就业
            </p>

            <span>
              本网充分利用互联网信息化技术
              ,致力打造"互联网+助残脱贫”,为企
              业和残疾人搭建合作桥梁,—站式
              减免优化残保金。
            </span>
          </div>

          <div class="txt1">
            <p>残保金减免优化一站式服务</p>
            <span>
              为企业提供"全流程—站式“残疾人
              招聘、入职、雇佣期间管理、残保金
              申报审核等服务,让企业省时、
              省事、省心。
            </span>
          </div>

          <div class="txt1">
            <p>持有正规资质及相关证书</p>
            <span>
              本网是一家持有正规的营业资质、
              案。公司理念“企业之宝、降本之
              策”,始终以合作客户利益为先,让
              客户放心、省心、安心、是宝策网
            </span>
          </div>
        </div>
      </div>
      <div class="tab1-right">
        <img src="../../../assets/img/home/home_2.png" alt="">
      </div>
    </div>
    <div class="imgs">
       <h2>
          <span></span>
          合作效果
        </h2>
        <div class="txt_imgs">
          <div class="img_item" v-for="(item, index) in tab2List" :key="index">
            <img :src="item.src" alt="">
            <p>{{item.txt}}</p>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TabBar",
  data() {
    return {
      tab2List: [
        {
          src: "https://www.guohuihr.cn/uploadfile/2020/1113/1605255779907113.png",
          txt: "员工收入提升26%"
        },
        {
          src: "https://www.guohuihr.cn/uploadfile/2020/1113/ca83cd7b6d6c7e3.png",
          txt: "HR效率提高80%"
        },
        {
          src: "https://www.guohuihr.cn/uploadfile/2020/1113/1605255770ea8cee.png",
          txt: "企业节省成本21%"
        },
        {
          src: "https://www.guohuihr.cn/uploadfile/2020/1113/16052557788a0b00.png",
          txt: "员工收入提升26%"
        }
      ]
    }
  }
};
</script>
<style lang="less" scoped>
.tab {
  width: 100%;
  display: flex;
  flex-direction: column;
  .tab1 {
    margin-top: 50px;
    display: flex;
    .tab1-left {
      flex: 3;
      h2 {
        font-weight: bold;
        font-size: 20px;
        span {
          display: inline-block;
          width: 6px;
          height: 6px;
          background-color: #03a14d;
          margin-right: 10px;
          position: relative;
          top: -3px;
        }
      }
      .left_txt {
        width: 80%;
        margin-top: 10px;
        letter-spacing: 2px;
        .txt1 {
          width: 100%;
          p {
            padding-top: 20px;
            font-weight: bold;
          }
          span {
            width: 100%;
            padding-top: 10px;
            display: block;
          }
        }
      }
    }
    .tab1-right {
      flex: 4;
      img {
        width: 70%;
        margin-left: 15%
      }

    }
  }
  .imgs {
      h2 {
        font-weight: bold;
        font-size: 20px;
        span {
          display: inline-block;
          width: 6px;
          height: 6px;
          background-color: #03a14d;
          margin-right: 10px;
          position: relative;
          top: -3px;
        }
      }
      .txt_imgs{
        width: 100%;
        margin-top: 20px;
        display: flex;
        .img_item {
            flex: 1
        }
      }
  }
}
</style>